<!-- hslider vue  -->
<template>
  <article>
    <slider :items="items" :cname="$style.slider" />
    <section :class="$style.list">
      <div :class="$style.item" v-for="(item,index) in enters" :key="index">
        <router-link :to="{ name: item.href }">
          <img :src="item.img" :alt="item.title">
          <h4>{{item.title}}</h4>
        </router-link>
      </div>
    </section>
  </article>
</template>

<script>
import Slider from '../core/slider'

export default {
  data () {
    return {
      items: [
        {
          href: 'Home',
          src: 'https://img12.360buyimg.com/jrpmobile/jfs/t21520/115/2067586764/41585/10cc0c92/5b460930N89f008d5.jpg?width=750&height=320'
        },
        {
          href: 'Home',
          src: 'https://img12.360buyimg.com/jrpmobile/jfs/t19876/105/2535543207/44581/a835455/5b460977N873bdfdb.jpg?width=750&height=320'
        }
      ],
      enters: [
        {
          title: '优惠券',
          img: 'https://img12.360buyimg.com/jrpmobile/jfs/t3991/64/2521945388/12110/93c0139/58d1e462Ncf294123.png?width=132&height=132',
          href: 'Home'
        },
        {
          title: '领红包',
          img: 'https://img12.360buyimg.com/jrpmobile/jfs/t3991/64/2521945388/12110/93c0139/58d1e462Ncf294123.png?width=132&height=132',
          href: 'Home'
        },
        {
          title: '抢钢镚',
          img: 'https://img12.360buyimg.com/jrpmobile/jfs/t4393/329/2180608902/13217/c88c0cec/58ec9dcdN1534e2d7.png?width=132&height=132',
          href: 'Home'
        },
        {
          title: '白条提额',
          img: 'https://img12.360buyimg.com/jrpmobile/jfs/t5488/298/1036263348/12073/b4f4de97/590ac8e8Ne9def22e.png?width=135&height=135',
          href: 'Home'
        }
      ]
    }
  },
  components: {
    Slider
  }
}

</script>
<style lang='scss' module>
@import '../../css/element.scss';
.slider{
  margin-top: 120px;
  img{
    width: 100%;
  }
}
.list{
  @include list(row);
  background-color: #fff;
  padding:40px 0 20px;
  justify-content: space-around;
  a{
    text-decoration: none;
  } 
  .item{
    text-align: center;
    img{
      display: inline-block;
      width: 90px;
      height: 90px;
    }
    h4{
      font-size: 26px;
      margin-top: 12px;
      color: #666;
    }
  }
}
</style>